<template>
	<a-modal :title="title" :width="1400" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
		@cancel="handleCancel" @afterClose="handleCancel">

		<a-spin :spinning="confirmLoading">
			<div v-if="currentType == 'invoice'">
				<a-form :form="form">
					<a-row>
						<a-col :span="12" v-show="false">
							<a-form-item label="对账单ID" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" disabled placeholder="请输入名称" v-decorator="['reconciliationOrderId']" />
							</a-form-item>
						</a-col>
						<a-col :span="12" v-show="false">
							<a-form-item label="主键" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" disabled placeholder="请输入名称"
									v-decorator="['reconciliationOrderInvoiceRecordId']" />
							</a-form-item>
						</a-col>

						<a-col :span="12">
							<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" disabled placeholder="请输入名称" v-decorator="['orgIdSupplierName']" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="预计付款日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-date-picker style="width: 100%;" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"
									v-decorator="['prePayTime', { rules: [{ required: true, message: '请选择预计付款日期！' }] }]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input-number style="width: 100%;" :min="0" :max="maxValue" placeholder="请输入"
									v-decorator="['invoiceAmount', { rules: [{ required: true, message: '请输入开票金额！' }] }]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-date-picker style="width: 100%;" value-format="YYYY-MM-DD HH:mm:ss"
									v-decorator="['invoiceTime', { rules: [{ required: true, message: '请选择开票日期！' }] }]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="发票号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" placeholder="请输入"
									v-decorator="['invoiceNumber', { rules: [{ required: true, message: '请输入发票号！' }] }]" />
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-form-item label="发票凭证" :labelCol="labelColBlock" :wrapperCol="wrapperColBlock" has-feedback="">
								<a-input placeholder="请输入上传凭证" v-decorator="['invoiceDocument']" v-show="false" />
								<fc-upload-file :accept="'jpg,png,zip,pdf,rar'" :file-list="fileList" @change="uploadChange">
									上传凭证
								</fc-upload-file>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<div v-if="currentType == 'payment'">
				<a-form :form="form">
					<a-row>
						<a-col :span="12" v-show="false">
							<a-form-item label="对账单ID" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" disabled placeholder="请输入名称" v-decorator="['reconciliationOrderId']" />
							</a-form-item>
						</a-col>
						<a-col :span="12" v-show="false">
							<a-form-item label="主键" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" disabled placeholder="请输入名称"
									v-decorator="['reconciliationOrderPayRecordId']" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input style="width: 100%;" disabled placeholder="请输入名称" v-decorator="['orgIdSupplierName']" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-input-number style="width: 100%;" :min="0" :max="maxValue"
									v-decorator="['payAmount', { rules: [{ required: true, message: '请输入付款金额！' }] }]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="付款日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
								<a-date-picker style="width: 100%;" value-format="YYYY-MM-DD HH:mm:ss"
									v-decorator="['payTime', { rules: [{ required: true, message: '请选择付款日期！' }] }]" />
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-form-item label="付款凭证" :labelCol="labelColBlock" :wrapperCol="wrapperColBlock" has-feedback="">
								<a-input placeholder="上传凭证" v-decorator="['payDocument']" v-show="false" />
								<fc-upload-file :accept="'jpg,png,zip,pdf,rar'" :file-list="fileList" @change="uploadChange">
									上传凭证
								</fc-upload-file>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-spin>
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import FcUploadFile from '@/components/FCUpload/FcUploadFile.vue'
import moment from 'moment';

import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

import {
	InvoiceRecordAdd,
	InvoiceRecordEdit,
	payRecordAdd,
	payRecordEdit
} from '@/api/modular/main/bill'

export default {
	components: {
		STable,
		FcUploadFile
	},
	data() {
		return {
			title: "",
			labelCol: {
				xs: { span: 24 },
				sm: { span: 4 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 2 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 18 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			queryParam: {},  // 查询参数
			columns: [       // 表头
			],
			fileList: [],
			sourceData: [],
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			currentType: null,
			caozuo: null,
			maxValue: null,
		}
	},
	methods: {
		moment,
		init(record) {
			let _this = this
			this.visible = true
			this.queryParam.pageSize = -1
		},
		//去开票
		toInvoice(record) {
			if (record.daikaipiao == 0) {
				this.$message.error("该对账单已经全部开票");
				return
			}
			this.form.resetFields()
			this.currentType = "invoice";
			this.caozuo = 'add';
			this.visible = true;
			this.title = "开票";
			console.log(record);
			this.maxValue = record.daikaipiao;
			setTimeout(() => {
				this.form.setFieldsValue({
					orgIdSupplierName: record.orgIdSupplierName,
					reconciliationOrderId: record.reconciliationOrderId
				})
			}, 200);
		},
		//去开票-编辑
		toInvoiceEdit(record, tipsObject) {
			this.currentType = "invoice";
			this.visible = true;
			this.title = "开票";
			this.caozuo = 'edit';
			this.maxValue = Number(tipsObject.daikaipiao) + record.invoiceAmount;
			console.log(record);
			setTimeout(() => {
				this.form.setFieldsValue({
					...record
				})
			}, 200);
			const token = Vue.ls.get(ACCESS_TOKEN);
			if (!record.invoiceDocument) {
				this.fileList = [];
				return
			}
			this.fileList = record.invoiceDocument.split(',').map(fileID => {
				return {
					uid: fileID,
					name: fileID,
					status: 'done',
					url: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}&token=${token}`,
					fileID: fileID
				}
			})
		},
		//付款
		toPayment(record) {
			if (record.daifukuan == 0) {
				this.$message.error("该对账单已经全部付款");
				return
			}
			this.currentType = "payment";
			this.visible = true;
			this.title = "付款";
			this.caozuo = 'add';
			this.maxValue = record.daifukuan;
			this.fileList = [];
			setTimeout(() => {
				this.form.setFieldsValue({
					orgIdSupplierName: record.orgIdSupplierName,
					reconciliationOrderId: record.reconciliationOrderId
				})
			}, 200);
		},
		//付款-编辑
		toPaymentEdit(record, tipsObject) {
			console.log(record, tipsObject);

			this.currentType = "payment";
			this.visible = true;
			this.title = "付款";
			this.caozuo = 'edit';
			this.maxValue = Number(tipsObject.daifukuan) + record.payAmount;
			setTimeout(() => {
				this.form.setFieldsValue(record)
			}, 200);
			if (!record.payDocument) {
				this.fileList = [];
				return
			}
			const token = Vue.ls.get(ACCESS_TOKEN);

			this.fileList = record.payDocument.split(',').map(fileID => {
				return {
					uid: fileID,
					name: fileID,
					status: 'done',
					url: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}&token=${token}`,
					fileID: fileID
				}
			})
		},
		uploadChange(fileListString) {
			if (this.currentType == 'invoice') {
				this.form.setFieldsValue({ invoiceDocument: fileListString })
			} else {
				this.form.setFieldsValue({ payDocument: fileListString })
			}

		},
		handleSubmit() {
			const { form: { validateFields } } = this
			this.confirmLoading = true

			validateFields((errors, values) => {
				if (!errors) {
					if (this.currentType == "invoice") {//开票												
						delete values.orgIdSupplierName
						if (this.caozuo == 'add') {
							InvoiceRecordAdd({
								...values
							}).then(res => {
								if (res.code == 200) {
									this.$message.success("开票成功");
									this.$emit("ok");
									this.visible = false;
								} else {
									this.$message.error(res.message);
									this.$emit("ok");
									this.visible = false;
								}
							})
						} else {
							InvoiceRecordEdit({
								...values,
								invoiceTime: values.invoiceTime.split(' ').length > 1 ? values.invoiceTime : this.moment(values.invoiceTime).format('YYYY-MM-DD HH:mm:ss'),
								prePayTime: values.prePayTime.split(' ').length > 1 ? values.prePayTime : this.moment(values.prePayTime).format('YYYY-MM-DD HH:mm:ss')
							}).then(res => {
								if (res.code == 200) {
									this.$message.success("修改成功");
									this.$emit("ok");
									this.visible = false;
								} else {
									this.$message.error(res.message);
									this.$emit("ok");
									this.visible = false;
								}
							})
						}
					} else {
						//付款
						delete values.orgIdSupplierName
						if (this.caozuo == 'add') {
							payRecordAdd({
								...values
							}).then(res => {
								if (res.code == 200) {
									this.$message.success("付款成功");
									this.$emit("ok");
									this.visible = false;
								} else {
									this.$message.error(res.message);
									this.$emit("ok");
									this.visible = false;
								}
							})
						} else {
							console.log(values);
							payRecordEdit({
								...values,
								payTime: values.payTime.split(' ').length > 1 ? values.payTime : this.moment(values.payTime).format('YYYY-MM-DD HH:mm:ss')
							}).then(res => {
								if (res.code == 200) {
									this.$message.success("付款成功");
									this.$emit("ok");
									this.visible = false;
								} else {
									this.$message.error(res.message);
									this.$emit("ok");
									this.visible = false;
								}
							})
						}

					}
					this.form.resetFields()
					this.confirmLoading = false
				} else {
					this.form.resetFields()
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			console.log("进入");

			this.form.resetFields()
			this.visible = false
		}
	}
}
</script>
